<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-inline{margin-bottom: 10px;}
</style>
<body>
    <div class="x-body">
        <blockquote class="layui-elem-quote">非实时，延迟1分钟左右更新</blockquote>
        <form class="layui-form layui-row">

            <div class="layui-inline layui-col-md4">
                <label class="layui-form-label w-auto">用户ID：</label>
                <div class="layui-input-block">
                    <input type="text" name="uid" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline layui-col-md4">
                <label class="layui-form-label w-auto">支付状态：</label>
                <div class="layui-input-block">
                    <select name="status" id="status">
                        <option value="">请选择</option>
                        <option value="0">未支付</option>
                        <option value="1">已支付</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline layui-col-md4">
                <label class="layui-form-label w-auto">选择短剧：</label>
                <div id="pMenu" style="width:100%;flex:1"></div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label w-auto">支付时间：</label>
                <div class="layui-inline" id="time" style="display: flex;align-items: center;">
                    <div class="layui-input-inline" style="margin-right:10px">
                        <input type="text" class="layui-input" name="start_time" id="start_time" placeholder="开始时间">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="end_time" id="end_time" placeholder="结束日期">
                    </div>
                </div>
            </div>

            
            <div class="layui-inline layui-col-md2" style="margin-left:10px">
                <button class="layui-btn" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </div>
            <input type="hidden" name="account_id" id="account_id">
        </form>
        
        <table id="order" lay-filter="order"></table>
    </div>
    <script>
        let account_id = GetQueryString('account_id')
        let params = {
            elem: '#order'
            , toolbar: false
            , url: '/cps/account/orderList?account_id='+account_id //数据接口
            , id: 'order'
            , page:true
            , cols: [[ //表头
                { field: 'id', title: 'ID', width: 80, sort: true , align: 'center'}
                , { field: 'uid', title: '用户ID', align: 'center',width: 120}
                , { field: 'video_name', title: '短剧名称', width:200, align: 'center'}
                , { field: 'total_fee', title: '金额', width: 100, align: 'center'}
                , { title: '状态', align: 'center', width: 100, templet: function (d) {
                        return d.status == 1 ? '已支付' : '待支付'
                    }
                }
                , { field: 'advertiser_id', align: 'center', title: '投放计划ID', }
                , {
                    field: 'pay_time', title: '支付时间', align: 'center', templet: function (d) {
                        return dayjsFormat(d.pay_time)
                    }
                }
            ]]
        }
        tableList(params)

        
        let selectParams = {
            url:'/cps/video/select',
            selected:[],
            tips:'选择短剧',
            name: 'video_id',
            field_id:'id',
            field_Name:'name',
            elem: '#pMenu'
        }
        selectN(selectParams)

        $('#account_id').val(account_id)

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#order_time'
            });
        })

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#start_time'
            });
        })

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#end_time'
            });
        })
    </script>
</body>

</html>